<script setup>
const props = defineProps(["item"]);
const { image, small_title, title, uPic, name, sc } = props.item;
</script>

<template>
  <div class="outer">
    <img :src="image" alt="" />
    <p class="small_title" v-if="small_title">{{ small_title }}</p>
    <p class="title">{{ title }}</p>
    <div class="boty">
      <div class="user">
        <img :src="uPic" :alt="name" />
        <span class="name">{{ name }}</span>
      </div>
      <span class="sc">{{ sc }}收藏</span>
    </div>
  </div>
</template>
<style scoped>
.outer {
  width: 160px;
  padding-left: 10px;
}
.outer > img {
  width: 100%;
  border-radius: 10px;
}
.small_title {
  color: #a08164;
  font-size: 12px;
}
.title {
  color: #333;
  font-size: 13px;
  font-weight: bold;
}
.boty {
  height: 30px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #949494;
  align-items: center;
}
.user {
    display: flex;
    align-items: center;
}
.user span {
    margin-left: 5px;
}

</style>
